<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS打字机效果</title>
    <meta name="description" content="">
    <meta name="author" content="Administrator">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <style type = "text/css">
        #main {
            width: 80%;
            height: 750px;
            margin: auto;
            padding: 10px;
            background: #cfe1ca;
            border: 10px outset #f9c6aa;
            line-height: 30px;
            color: #9f3c61;
            font-size: 18px;
        }
        p {
            text-indent: 30px;
        }
    </style>
    <script type = "text/javascript">
        let typeWriter = {
            msg: function(msg){
                return msg;
            },
            len: function(){
                return this.msg.length;
            },
            seq: 0,
            speed: 150,//打字时间(ms)
            type: function(){
                let _this = this;
                document.getElementById("main").innerHTML = _this.msg.substring(0, _this.seq);
                if (_this.seq === _this.len()) {
                    _this.seq = 0;
                    clearTimeout(t);
                }
                else {
                    _this.seq++;
                    let t = setTimeout(function(){_this.type()}, this.speed);
                }
            }
        };
        window.onload = function(){
            let msg = "JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可";
            function getMsg(){
                return msg;
            }
            typeWriter.msg = getMsg(msg);
            typeWriter.type();
        }
    </script>
</head>
<body>
<div id = "main"> </div>
</body>
</html>